<template>
  <div>
    <div class="vue-con">
      <vue-cropper
        ref="cropper"
        :img="option.img"
        :outputSize="option.size"
        :outputType="option.outputType"
        :info="true"
        :full="option.full"
        :autoCrop="option.autoCrop"
        :canMove="option.canMove"
        :canMoveBox="option.canMoveBox"
        :fixedBox="option.fixedBox"
        :original="option.original"
        :fixed="option.fixed"
        :fixedNumber="option.fixedNumber"
        ></vue-cropper>

      <div class="preview-con">
          <div class="tips">效果预览：</div>
          <img :src="fileServer + loginUser.image" alt="" class="preview-big">
          <img :src="fileServer + loginUser.image" alt="" class="preview-radius">
          <img :src="fileServer + loginUser.image" alt="" class="preview-small">
      </div>

    </div>
    <div class="btn-cons">
      <label class="el-button el-button--primary el-button--medium" style="margin-right:20px;" for="uploads">选取图片</label>
      <input type="file" id="uploads" style="position:absolute; clip:rect(0 0 0 0);" accept="image/png, image/jpeg, image/gif, image/jpg" @change="uploadImg($event)">
      <el-button type="primary" @click="submit()" >提 交</el-button>
    </div>
  </div>
</template>

<script>
import vueCropper from "vue-cropper";
import Admin from '@/api/user'
import { mapState } from "vuex";
import Config from '@/utils/config'
export default {
  data () {
    return {
      crap: false,
      fileServer: Config.fileServer,
      option: {
        img: '',
        size: 1,
        full: false,
        outputType: "png",
        canMove: true,
        fixedBox: false,
        original: false,
        canMoveBox: false,
        autoCrop: true,
        fixed: true,
				fixedNumber: [1, 1]
      }
    }
  },

  components: {vueCropper},

  computed: {
    ...mapState(['loginUser'])
  },

  methods: {
    submit() {
      this.$refs.cropper.getCropBlob(data => {
        Admin.uploadAvatar(data).then(data => {
          this.$message({message : '修改成功',type : 'success'});
          this.$store.commit('avatar',data.path);
        }).catch(err => {
          this.$message.error("修改头像失败请重试");
        });
      });
    },
    uploadImg(e) {
      var file = e.target.files[0];
      if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
        this.$message.error("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
        return false;
      }
      var reader = new FileReader();
      reader.onload = e => {
        let data;
        if (typeof e.target.result === "object") {
          // 把Array Buffer转化为blob 如果是base64不需要
          data = window.URL.createObjectURL(new Blob([e.target.result]));
        } else {
          data = e.target.result;
        }
        
        this.option.img = data;

      };
      // 转化为base64
      // reader.readAsDataURL(file)
      // 转化为blob
      reader.readAsArrayBuffer(file);
    }
  },

  mounted(){
  }
}

</script>
<style rel="stylesheet/less" lang="less" scoped>
.vue-con {
  position: relative;
  width: 400px;
  height: 400px;

  .preview-con{
    position: absolute;
    left: 500px;
    top: 100px;
    width: 500px;

    .tips{
      color: #999;
      font-size: 14px;
      margin-bottom: 15px;
    }

    .preview-big{
      width: 150px;
      height: 150px;
      border: 1px solid #eee;
    }
    .preview-radius{
      margin-left: 30px;
      width: 100px;
      height: 100px;
      border-radius: 100%;
      border: 1px solid #eee;
    }
    .preview-small{
      margin-left: 30px;
      width: 50px;
      height: 50px;
      border: 1px solid #eee;
    }
  }
}

.btn-cons{
  margin: 20px;
}
</style>
